---
import {
  createChangeLangLinks,
  createLink,
  getPathParamsFromId,
  getTextLocalized,
  isExternal,
  translations,
} from "../../languages";
import { SITE } from "../../consts";
import { DESKTOP_NAVIGATION, SOCIAL_LINKS, DOCS_VERSIONS, isSidebarGroup } from "../../navigation";

import MobileNavigation from "../MobileNavigation.astro";
import DropDownMenu from "../DropDownMenu.astro";

import EffectorLogo from "./EffectorLogo.astro";
import MobileMenuButton from "./MobileMenuButton.astro";
import Search from "./Search.astro";
import SkipToContent from "./SkipToContent.astro";
import ThemeSwitch from "./ThemeSwitch.astro";

import IconExternal from "@icons/External.astro";
import IconLanguage from "@icons/Language.astro";
import IconDots from "@icons/Dots.astro";

type Props = {
  currentPage: string;
};

const { lang, slug } = getPathParamsFromId(Astro.url.pathname);
const languageLinks = createChangeLangLinks({ slug });
const homeLink = lang === "en" ? "/" : `/${lang}`;
---

<header data-pagefind-ignore="all">
  <SkipToContent />

  <nav>
    <a class="logo" href={homeLink}>
      <EffectorLogo size={40} />
      <span>{SITE.title ?? getTextLocalized(translations.Documentation, lang)}</span>
    </a>
    {
      DESKTOP_NAVIGATION.filter((item) => !isExternal(item)).map((navLink) => {
        const href = createLink(navLink, lang);
        const text = getTextLocalized(navLink, lang);

        if (isSidebarGroup(navLink)) {
          return (
            <div class="hidden md:flex">
              <DropDownMenu links={navLink.items}>
                <a href={`/${lang}/api`} class="link">
                  API
                </a>
              </DropDownMenu>
            </div>
          );
        }

        return (
          <div class="relative hidden md:flex">
            <a href={href} class="link">
              {text}
            </a>
          </div>
        );
      })
    }
    <div class="ml-auto"></div>
    {
      DESKTOP_NAVIGATION.filter((item) => isExternal(item)).map((navLink) => {
        const href = createLink(navLink, lang);
        const text = getTextLocalized(navLink, lang);

        return (
          <a href={href} target="_blank" class="link only-medium">
            <span>{text}</span>
            <IconExternal />
          </a>
        );
      })
    }
    <Search />
    <div class="only-medium">
      <DropDownMenu links={DOCS_VERSIONS}>v23.x</DropDownMenu>
    </div>
    <div class="only-medium">
      <DropDownMenu links={languageLinks}>
        <IconLanguage />
      </DropDownMenu>
    </div>
    <ThemeSwitch />
    {
      SOCIAL_LINKS.map((link) => {
        const Icon = link.icon;
        return (
          <a href={link.link} class="link only-medium" target="_blank">
            <Icon size={24} />
          </a>
        );
      })
    }
    <div class="hidden md:inline-block xl:hidden">
      <DropDownMenu
        links={[
          ...DESKTOP_NAVIGATION.filter(isExternal),
          {
            text: { en: "Language", ru: "Язык документации" },
            links: languageLinks,
          },
          {
            text: { en: "Other versions", ru: "Другие версии" },
            links: DOCS_VERSIONS,
          },
          {
            text: { en: "Social", ru: "Социальные сети" },
            links: SOCIAL_LINKS,
          },
        ]}
      >
        <IconDots size={24} />
      </DropDownMenu>
    </div>
    <div class="md:hidden">
      <MobileMenuButton />
    </div>
  </nav>
</header>

<MobileNavigation />

<style>
  header {
    @apply fixed left-0 right-0 top-0 flex items-center justify-center overflow-visible shadow;

    z-index: 110;
    height: var(--theme-navbar-height);

    -webkit-backdrop-filter: saturate(50%) blur(12px);
    backdrop-filter: saturate(50%) blur(12px);
    background-color: var(--theme-navbar-bg);
    font-family: "Lexend Deca", sans-serif;
  }

  nav {
    @apply mx-auto flex items-center justify-end gap-0 md:gap-2;

    padding-left: max(env(safe-area-inset-left), 1.5rem);
    padding-right: max(env(safe-area-inset-right), 1.5rem);
    /* max-width: 84rem; */
    width: 100%;
    max-width: var(--header-max-width, 84rem);
    height: var(--theme-navbar-height);
  }

  .logo {
    @apply flex items-center rounded-3xl hover:opacity-75 focus:no-underline;
    transition: opacity 100ms ease-out;
  }

  .logo span {
    @apply mx-2 select-none text-2xl font-extrabold;
    color: var(--theme-text);
  }

  @media (max-width: 432px) {
    .logo span {
      display: none;
    }
  }

  nav {
    @apply flex gap-4 text-base font-normal;
    font-stretch: normal;
    font-optical-sizing: auto;
  }

  nav .link {
    @apply flex items-center justify-center gap-1 text-base font-normal;
    color: var(--theme-text);
  }
  nav .link:hover,
  nav .link:focus,
  nav .link.active {
    color: var(--theme-accent);
  }
  nav .link.active:hover,
  nav .link.active:focus {
    color: var(--theme-text-accent);
  }

  .link.only-medium,
  .only-medium {
    @apply hidden xl:flex;
  }
</style>
